<template>
	<view class="verify-box">
		<view class="verify-header">
			<view class="back-icon" @click="goBack">
				<image src="/static/icon/left.svg" mode=""></image>
			</view>
		</view>
		<view class="verify-title">
			<text>{{ t("verify.yzm") }}</text>
		</view>
		<view class="verify-subtitle syl">
			<text>{{ t("verify.qsryzm") }}</text>
			<text class="black">{{ email }}</text>
			<text class="black">{{ t("verify.yxdyzm") }}</text>
			<text class="blue">{{minutes}}:{{seconds < 10 ? '0' + seconds : seconds}}</text>
		</view>
		
		
		<!-- 验证码显示区域 -->
		<view class="code-display">
			<view class="code-box" :class="{active:verifyCode[index]}" v-for="(item, index) in 4" :key="index">
				<text class="code-text">{{verifyCode[index] || ''}}</text>
			</view>
		</view>
		
		<!-- 重新发送 -->
		<view class="resend-box">
			<text>{{ t("verify.myyzm") }}</text>
			<text class="resend-text" @click="resendCode" :class="{'disabled': isCounting}">{{ isCounting ? `${t('register.send')}(${countdown}s)` : t('verify.cxfs') }}</text>
		</view>
		
		<!-- 自定义键盘 -->
		<view class="keyboard">
			<view class="keyboard-row">
				<view class="key" @click="inputKey('1')">1</view>
				<view class="key" @click="inputKey('2')">2</view>
				<view class="key" @click="inputKey('3')">3</view>
			</view>
			<view class="keyboard-row">
				<view class="key" @click="inputKey('4')">4</view>
				<view class="key" @click="inputKey('5')">5</view>
				<view class="key" @click="inputKey('6')">6</view>
			</view>
			<view class="keyboard-row">
				<view class="key" @click="inputKey('7')">7</view>
				<view class="key" @click="inputKey('8')">8</view>
				<view class="key" @click="inputKey('9')">9</view>
			</view>
			<view class="keyboard-row">
				<view class="key dot" @click="inputKey('.')">.</view>
				<view class="key" @click="inputKey('0')">0</view>
				<view class="key delete" @click="deleteKey">
					<image src="/static/icon/delete.svg" mode=""></image>
				</view>
			</view>
		</view>
		
		<GlobalPopup ref="popup"></GlobalPopup>
	</view>
</template>

<script setup>
import { ref, reactive, onMounted, onUnmounted } from 'vue';
import { useI18n } from 'vue-i18n';

const { t } = useI18n();
const popup = ref();

// 邮箱地址（实际应用中应该从路由参数或全局状态获取）
const email = ref('32WEFJ08@gmail.com');

// 验证码相关
const verifyCode = ref('');
const maxLength = 4; // 验证码长度

// 倒计时相关
const isCounting = ref(true); // 默认开始倒计时
const countdown = ref(60);
let timer = null;

// 验证码有效期倒计时（5分钟）
const minutes = ref(5);
const seconds = ref(0);
let validityTimer = null;

// 输入数字
const inputKey = (key) => {
	if (verifyCode.value.length < maxLength) {
		verifyCode.value += key;
		
		// 如果输入满4位，自动验证
		if (verifyCode.value.length === maxLength) {
			validateCode();
		}
	}
};

// 删除数字
const deleteKey = () => {
	if (verifyCode.value.length > 0) {
		verifyCode.value = verifyCode.value.slice(0, -1);
	}
};

// 验证验证码
const validateCode = () => {
	// 这里添加验证逻辑
	console.log('验证码:', verifyCode.value);
	
	// 显示验证成功提示框
	popup.value.open({
		title: t('verify.yzcg'),
		content: t('verify.zzdl'),
		loading: true
	});
	
	// 模拟验证成功后跳转
	setTimeout(() => {
		// 关闭弹窗
		popup.value.close();
		
		// 跳转到首页
		uni.switchTab({
			url: '/pages/index/index'
		});
	}, 2000);
};

// 重新发送验证码
const resendCode = () => {
	// 如果正在倒计时中，不允许再次发送
	if (isCounting.value) {
		return;
	}
	
	// 发送验证码逻辑
	console.log('重新发送验证码');
	
	// 开始倒计时
	isCounting.value = true;
	countdown.value = 60;
	
	// 清除可能存在的旧定时器
	if (timer) {
		clearInterval(timer);
	}
	
	timer = setInterval(() => {
		countdown.value--;
		if (countdown.value <= 0) {
			// 倒计时结束
			clearInterval(timer);
			timer = null;
			isCounting.value = false;
			countdown.value = 60;
		}
	}, 1000);
	
	// 重置验证码有效期
	resetValidityTimer();
};

// 重置验证码有效期计时器
const resetValidityTimer = () => {
	// 清除旧计时器
	if (validityTimer) {
		clearInterval(validityTimer);
	}
	
	// 重置为5分钟
	minutes.value = 5;
	seconds.value = 0;
	
	// 开始新的计时器
	validityTimer = setInterval(() => {
		if (seconds.value > 0) {
			seconds.value--;
		} else {
			if (minutes.value > 0) {
				minutes.value--;
				seconds.value = 59;
			} else {
				// 验证码过期
				clearInterval(validityTimer);
			}
		}
	}, 1000);
};

// 返回上一页
const goBack = () => {
	uni.navigateBack();
};

// 组件挂载时自动发送验证码并开始倒计时
onMounted(() => {
	// 模拟自动发送验证码
	console.log('自动发送验证码');
	
	// 开始倒计时
	isCounting.value = true;
	countdown.value = 60;
	
	timer = setInterval(() => {
		countdown.value--;
		if (countdown.value <= 0) {
			// 倒计时结束
			clearInterval(timer);
			timer = null;
			isCounting.value = false; // 确保设置为false，使按钮显示"重新发送"
			countdown.value = 60;
		}
	}, 1000);
	
	// 开始验证码有效期倒计时
	resetValidityTimer();
});

// 组件卸载时清除定时器
onUnmounted(() => {
	if (timer) {
		clearInterval(timer);
		timer = null;
	}
	
	if (validityTimer) {
		clearInterval(validityTimer);
		validityTimer = null;
	}
});
</script>

<style lang="scss">
.verify-box {
	padding: 0 40rpx;
	height: 100vh;
	background-color: #fff;
	
	.verify-header {
		padding-top: 88rpx;
		display: flex;
		align-items: center;
		
		.back-icon {
			width: 69.77rpx;
			height: 69.77rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 17.44rpx;
			border: 1.74rpx solid #EFF6FF;
			
			image {
				width: 10.47rpx;
				height: 20.93rpx;
			}
		}
	}
	
	.verify-title {
		margin: 60rpx 32rpx 0;
		font-size: 48rpx;
		color: #000000;
		font-weight: 500;
		line-height: 1.2;
	}
	
	.verify-subtitle {
		margin: 22.65rpx 32rpx 0;
		font-size: 28rpx;
		color: #6C727F;
		margin-bottom: 20rpx;
		.black{
			color: #121826;
		}
		.blue{
			color: #0278DC;
		}
	}
	
	.validity-period {
		margin: 0 32rpx 40rpx;
		text-align: center;
		font-size: 28rpx;
		color: #6C727F;
	}
	
	.code-display {
		display: flex;
		justify-content: space-between;
		margin: 0 32rpx;
		
		.code-box {
			width: 111.63rpx;
			height: 111.63rpx;
			border-radius: 27.91rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 45.35rpx;
			font-weight: 500;
			color: #000000;
			border: 2rpx solid transparent;
			background: #F9FAFB;
		}
		.active{
			left: 244.19rpx;
			top: 411.63rpx;
			opacity: 1;
			border-radius: 27.91rpx;
			background: #ffffff;
			border: 2rpx solid #3B82F6;
			  

		}
	}
	
	.resend-box {
		margin: 40rpx 32rpx;
		text-align: center;
		font-size: 24.42rpx;
		color: #6C727F;
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 10rpx;
		
		.resend-text {
			font-size: 24.42rpx;
			color: #0278DC;
			
			&.disabled {
				color: #9EA3AE;
			}
		}
	}
	
	.keyboard {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 40rpx;
		background: #F9FAFB;
		border-radius: 69.77rpx 69.77rpx 0rpx 0rpx;
		
		.keyboard-row {
			display: flex;
			justify-content: space-between;
			margin-bottom: 20rpx;
			
			.key {
				width: 200rpx;
				height: 120rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 48rpx;
				font-weight: 600;
				color: #121826;
				
				&.delete {
					image {
						width: 54rpx;
						height: 54rpx;
					}
				}
			}
		}
	}
}
</style>